{% extends "../public/basechild.html" %}

{% block title %} 文字发布 {% endblock title %}

{% block style%}
<link href="/static/admin/eleme/element.css" rel="stylesheet" />
<link href="/static/admin/eleme/element-extends.css" rel="stylesheet" />
{% endblock %}

{% block content %}
<el-row :gutter="20" id="app" v-cloak>
<el-col :span="24" class="mt mb">
	<el-form ref="form" :model="article" label-width="80px">
		<el-form-item label="所属分组">
			<el-select v-model="article.category" size="small" placeholder="请选择要发布的分组">
				<!-- <el-option
					v-for="c in cates"
					:key="c.value"
					:label="c.label"
					:value="c.value">
				</el-option> -->
			</el-select>
		</el-form-item>

		<el-form-item label="文章标题">
			<el-input v-model="article.title" size="small" placeholder="请输入文章标题"></el-input>
		</el-form-item>
<p class="bt"></p>
		<el-form-item label="文章描述">
			<el-input type="textarea" v-model="article.remarks" placeholder="请输入文章描述信息"></el-input>
		</el-form-item>
<p class="bt"></p>
		<el-form-item label="文章封面">
			<div class="block" id="container">

				<div class="block border pos mb" style="width:100px; height:100px;">
					<img :src="article.imgUrl" v-if="article.imgUrl !== ''" style="width:100px;height:100px;">
					<i class="el-icon-plus block center" style="line-height: 100px;" v-else></i>
					<i class="block radis bg-green el-icon-check center" style="width: 20px;height:20px; position: absolute;bottom: 4px;right: 4px; color:white;line-height: 20px;opacity:0.8;" v-if="article.imgUrl !== ''"></i>
				</div>
				

				<el-button type="primary" icon="el-icon-picture" size="small" plain id="pickfiles">选择图片</el-button>
			</div>
		</el-form-item>
<p class="bt"></p>
		<el-form-item label="文章编辑">
			<script id="editor" type="text/plain" style="width: 100%; height: 500px;"></script>
		</el-form-item>
<p class="bt"></p>
		<el-form-item>
			<el-button type="primary" icon="el-icon-upload" @click="onSubmit">确定发布</el-button>
			<el-button type="danger" icon="el-icon-circle-close" @click="closeEdit">取消关闭</el-button>
		</el-form-item>

	</el-form>
</el-col>
</el-row>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/layer/layer.js"></script>
<script type="text/javascript" src="/static/admin/js/h.js"></script>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script type="text/javascript" src="/static/admin/eleme/element.js"></script>
<!-- uEditor -->
<!-- <script src="/static/admin/config/config.js"></script> -->
<script src="/static/admin/ueditor/ueditor.config.js"></script>
<script src="/static/admin/ueditor/ueditor.all.js"></script>
<!-- 七牛云存储 -->
<!-- <script src="/static/admin/qiniu/plupload/moxie.js"></script> -->
<script src="/static/admin/js/plupload/plupload.full.min.js"></script>
<script src="/static/admin/js/qiniu.js"></script>

<script>
var ue = UE.getEditor('editor');
var vm = new Vue({
	el: '#app',
	data: {
		article: {
			category: '',
			title: '',
			remarks: '',
			imgUrl: 'http://p0besrfz0.bkt.clouddn.com/o_1c0dsj3at138h1os01t0u1o7r1bjv9.jpg',
		},
		jiazai: false,
	},
	methods: {

		onSubmit: function(){
			// console.log(this.article.imgUrl)
			console.log(ue.getContent());
		},

		closeEdit: function(){
			H.closewin();
		},

		tips: function(msg, tp){
			this.$message({
				message: msg,
				type: tp,
				showClose: true
			})
		},
	},
	mounted: function(){
		let that = this;
		//引入Plupload 、qiniu.js后
		var uploader = Qiniu.uploader({
		  runtimes: 'html5,flash,html4',    //上传模式,依次退化
		  browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
		  uptoken_url: '/admin/document/gettoken',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
		  // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
		  // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
		  // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
		  domain: 'http://p0besrfz0.bkt.clouddn.com/',   //bucket 域名，下载资源时用到，**必需**
		  get_new_uptoken: true,  					//设置上传文件的时候是否每次都重新获取新的token
		  container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
		  max_file_size: '100mb',           //最大文件体积限制
		  flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
		  max_retries: 3,                   //上传失败最大重试次数
		  dragdrop: true,                   //开启可拖曳上传
		  drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
		  chunk_size: '4mb',                //分块上传时，每片的体积
		  auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
		  unique_names: true,								//当值为 true 时会为每个上传的文件生成一个唯一的文件名
		  init: {
		    'FilesAdded': function(up, files) {
	        plupload.each(files, function(file) {
	          // 文件添加进队列后,处理相关的事情
	        });
		    },
		    'BeforeUpload': function(up, file) {
		      // 每个文件上传前,处理相关的事情
		      let unix = new Date().valueOf();
		      let typeArr = file.name.split('.');
		      file.name = unix + '.' + typeArr[typeArr.length-1];
		      console.log(file)
		    },
		    'UploadProgress': function(up, file) {
		      // 每个文件上传时,处理相关的事情
		      /*let unix = new Date().valueOf();
		      file.id = unix;
		      let typeArr = file.name.split('.');
					file.target_name = unix + '.' + typeArr[typeArr.length-1];
					console.log(file)*/
		    },
		    'FileUploaded': function(up, file, info) {
          // 每个文件上传成功后,处理相关的事情
          // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
          // {
          //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
          //    "key": "gogopher.jpg"
          //  }
          // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
          var domain = up.getOption('domain');
          var res = JSON.parse(info);
          var sourceLink = domain + res.key; //获取上传成功后的文件的Url
          that.article.imgUrl = sourceLink;
		    },
		    'Error': function(up, err, errTip) {
		      //上传出错时,处理相关的事情
		      that.tips('上传失败，请重新上传','error')
		    },
		    'UploadComplete': function() {
		      //队列文件处理完毕后,处理相关的事情
		    },
		    'Key': function(up, file) {
		      // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
		      // 该配置必须要在 unique_names: false , save_key: false 时才生
		      var key = "";
		      // do something with key here
		      return key
		    }
		  }
		});
	},
	delimiters: ['${', '}'],
})
</script>
{% endblock %}